import { Tag, Grid } from 'antd-mobile'
import { thousandFormatter, jiaoToYuan } from '../../../utils/index'

const ProfitAndLossInfo = (props) => {
  const { item } = props
  const { info } = item

  return (<>
    <div className="profit-and-loss-info">
      <Grid columns={5}>
        <Grid.Item>
          <div>{info.status == 1 ? <Tag color='success'>恭喜啦</Tag> : <Tag color='default'>很遗憾</Tag>}</div>
          <div className="peroid-info">第{info.buyTimes}次购买</div>
        </Grid.Item>
        <Grid.Item span={2}>
          <div className="peroid-info">本期购买：{info.ticketCount} 注</div>
          <div className="peroid-info">本期单价：{thousandFormatter(jiaoToYuan(info.aExpense))} 元</div>
          <div className="peroid-info">本期费用：{thousandFormatter(jiaoToYuan(info.buyAmount))} 元</div>
        </Grid.Item>
        <Grid.Item span={2}>
          <div className="peroid-info">本轮支出：－ {thousandFormatter(jiaoToYuan(info.oneCycleExpense))} 元</div>
          <div className="peroid-info">本轮收入：{isNaN(info.oneCycleIncome) ? `0` : `＋ ${thousandFormatter(jiaoToYuan(info.oneCycleIncome))}`} 元</div>
          <div className="peroid-info">本轮利润：{isNaN(info.oneCycleIncome) ? `－ ${thousandFormatter(jiaoToYuan(info.oneCycleExpense))}` : `${info.oneCycleIncome - info.oneCycleExpense > 0 ? '＋' : '－'} ${thousandFormatter(jiaoToYuan(Math.abs(info.oneCycleIncome - info.oneCycleExpense)))}`} 元</div>
        </Grid.Item>
      </Grid>
    </div>
  </>)
}

export default ProfitAndLossInfo